<template>
	<view>
		<!-- 自定义导航栏 -->
		<jmnavbar title="播放器" @backClick="backButtonClick"></jmnavbar>
		<view class="display_view">
			<view class="rotate_animation_view">
				<image class="disc_view" src="../../../static/music_player/cm2_play_disc.png" mode="aspectFill"></image>
				<image class="url_view" :src="currentRotateImageSrc" mode="aspectFill"></image>
			</view>
		</view>
		<view class="title_view">{{ currentItem.title }}</view>
		<view class="author_view">{{ currentItem.type }}</view>
		<view class="action_view">
			<view class="action_view_left" @click="randomButtonClick()">
				<text class="repeat_button" :class="currentSelectedModel.imageSrc"></text>
				<view class="repeat_button_tips">{{ currentSelectedModel.title }}</view>
			</view>
			<image class="play_button" :src=playButtonActionImage mode="aspectFill" @click="playButtonClick()"></image>
			<view class="action_view_right" @click="timingButtonClick()">
				<text class="tim_button alifonts icon-dingshi"></text>
				<uni-countdown ref="countdownTimer" :show-day="false" :minute="countdownMinute" @timeup="countdownComplete()" color="#FFFFFF" backgroundColor=$zm-main-color splitorColor="#FFFFFF" zmFontSize="30rpx"></uni-countdown>
			</view>
		</view>
		<uni-popup ref="randomPopup" type="bottom">
			<view class="random_pop_list_view">
				<view class="random_action_name">播放模式</view>
				<view class="random_action_item" v-for="(item,index) in playMusicModeArray" :key="index" @click="playModelCellClick(item)">
					<text class="cell_image" :class="item.imageSrc"></text>
					<view class="cell_content">
						<view class="cell_title">{{ item.title }}</view>
						<view class="cell_tips">{{ item.tips }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="timingPopup" type="bottom" @change="timingSheetChange">
			<view class="timing_pop_back_view">
				<view class="timing_pop_top">
					<view class="timing_pop_name">定时停止播放</view>
					<view class="current_time_view">{{ currentTimingTime }}</view>
					<switch :checked="currentSwichState" color="#FF4040" @change="timingSwitchAction" />
				</view>
				<slider class="slider_name" value="60" activeColor="#000000" block-color="#000000" block-size=12 min=1 max=180 step=1 @changing="timingSliderScroll" @change="timingSliderComplete"/>
				<view class="timing_pop_bottom">
					<text class="slider_start">1分钟</text>
					<text class="slider_end">3小时</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/* 播放模式数组 */
				playMusicModeArray: [
					{
						"title":"单曲循环",
						"tips":"循环播放当前音频",
						"imageSrc":"alifonts icon-danquxunhuan",
						"selected":false,
						"type": "1"
					},
					{
						"title":"列表循环",
						"tips":"循环播放当前列表的音频",
						"imageSrc":"alifonts icon-liebiaoxunhuan",
						"selected":false,
						"type": "2"
					},
					{
						"title":"列表随机",
						"tips":"随机播放当前列表的音频",
						"imageSrc":"alifonts icon-suijibofang",
						"selected":false,
						"type": "3"
					}
				],
				/* 当前旋转图片的url地址 */
				currentRotateImageSrc: "",
				/* 当前选择的哪个播放模式 */
				currentSelectedModel: null,
				/* 当前播放按钮的图片 */
				playButtonActionImage: "../../../static/music_player/music_player_pause.png",
				/* 弹框上的当前选择的时间 */
				currentTimingTime: "",
				/* 倒计时的---分 */
				countdownMinute: 0,
				/* 当前Switch开关的状态 */
				currentSwichState: false,
				/* 音频数组 */
				musicList: [],
				/* 当前播放的音频是哪一个 */
				currentMusicIndex: 0,
				/* 当前播放的音频 */
				currentItem: null,
				/* 背景音频播放器 */
				bgAudioManager: null,
			};
		},
		onLoad:function(options){
			this.configMusicListData(options);
			this.initBgAudioManager();
			this.initPopupData();
		},
		onReady() {
			this.$refs.countdownTimer.timeUp();
		},
		methods: {
			/* 返回按钮点击 */
			backButtonClick() {
				if (this.currentSwichState) {
					uni.showModal({
					    title: '提示',
						content: '退出页面会停止定时',
						confirmText: '确认',
						confirmColor: '#FF4040',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateBack();
					        }
					    }
					});		
				}else {
					uni.navigateBack();
				}
			},
			/* 初始化弹框上的数据 */
			initPopupData() {
				this.currentSelectedModel = this.playMusicModeArray[0];
				this.currentTimingTime = "60分钟";
				this.countdownMinute = 60;
				this.currentSwichState = false;
			},
			/* 配置上一个页面传进来的数据 */
			configMusicListData(options) {
				// title music icon type
				this.musicList = JSON.parse(options.items);
				this.currentMusicIndex = parseInt(options.index);
				this.currentItem = this.musicList[this.currentMusicIndex];
				if (this.currentItem.from == "home") {
					this.currentRotateImageSrc = "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-83418c8b-2862-4eac-a6ec-bf64544c5621/79dad4f8-af28-4eaf-8180-dd1b18f30102.png";
				} else {
					this.currentRotateImageSrc = this.currentItem.icon;
				}
			},
			/* 左边的播放模式按钮点击 */
			randomButtonClick() {
				this.$refs.randomPopup.open();
			},
			/* 右边的定时按钮点击 */
			timingButtonClick() {
				this.$refs.timingPopup.open();
			},
			/* 中间的播放暂停按钮点击 */
			playButtonClick() {
				if(this.bgAudioManager.paused) {
					this.startPlayAudioMusic();
				} else {
					this.pausePlayAudioMusic();
				}
			},
			/* 播放模式选择 */
			playModelCellClick(item) {
				// 选择播放模式
				this.currentSelectedModel = item;
				this.$refs.randomPopup.close();
			},
			/* 定时开关操作 */
			timingSwitchAction(e) {
				this.currentSwichState = e.target.value;
			},
			/* 定时弹框上滑动条滚动 */
			timingSliderScroll(e) {
				let time = e.detail.value;
				this.currentTimingTime = time + "分钟"
				this.countdownMinute = time;
			},
			/* 定时弹框上滑动条停止滑动 */
			timingSliderComplete(e) {
				let time = e.detail.value;
				uni.showToast({
					title: time + "分钟后停止播放",
					icon:"none"
				});
				this.currentSwichState = true;
			},
			/* 定时弹框消失、显示状态改变 */
			timingSheetChange(e) {
				let show = e.show;
				if (show == false) {
					// 定时弹框消失
					if (this.currentSwichState == true) {
						this.$refs.countdownTimer.play();
					} else {
						this.$refs.countdownTimer.timeUp();
					}
				}
			},
			/* 倒计时完成 */
			countdownComplete() {
				// 倒计时完成
				if (this.currentSwichState == true) {
					this.currentSwichState = false;
					// 关闭音频播放器
					console.log("关闭音频播放器")
					this.pausePlayAudioMusic();
				} else {
					// 不要操作
					console.log("不要操作")
				}
			},
			/* 初始化音频播放器 */
			initBgAudioManager() {
				this.bgAudioManager = uni.getBackgroundAudioManager();
				this.bgAudioManager.singer = '九萌助眠';
				this.bgAudioManager.coverImgUrl = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png';
				
				let index = this.currentMusicIndex;
				this.playBgAudioMusicWithIndex(index);
				
				// 背景音频自然播放结束事件
				var that = this;
				this.bgAudioManager.onEnded(()=>{
					that.playNextMuisc();
				});
				// 背景音频播放事件
				this.bgAudioManager.onPlay(()=>{
					that.playButtonActionImage = "../../../static/music_player/music_player_pause.png";
				});
				// 背景音频暂停事件
				this.bgAudioManager.onPause(()=>{
					that.playButtonActionImage = "../../../static/music_player/music_player_play.png";
				});
			},
			/* 开始播放音频 */
			startPlayAudioMusic() {
				this.bgAudioManager.play();
			},
			/* 暂停播放音频 */
			pausePlayAudioMusic() {
				this.bgAudioManager.pause();
			},
			/* 播放下一首 */
			playNextMuisc() {
				var playModelItem = this.currentSelectedModel;
				// 播放模式判断
				if(playModelItem.type == "1") {
					// 单曲循环
					let index = this.currentMusicIndex;
					console.log("单曲循环" + index);
					this.playBgAudioMusicWithIndex(index);
				} else if (playModelItem.type == "2") {
					// 列表循环
					let index = this.currentMusicIndex + 1;
					if(index == this.musicList.length) {
						// 这是最后一首
						index = 0;
					}
					console.log("列表循环" + index);
					this.playBgAudioMusicWithIndex(index);
				} else if (playModelItem.type == "3") {
					// 随机播放
					let index = this.getNoRepeateRandomIndex();
					console.log("随机播放" + index);
					this.playBgAudioMusicWithIndex(index);
				} else {}
			},
			/* 获取和上一次不重复的index */
			getNoRepeateRandomIndex() {
				let index = Math.floor((Math.random()*this.musicList.length));
				if (index == this.currentMusicIndex) {
					return this.getNoRepeateRandomIndex();
				} else {
					return index;
				}
			},
			/* 根据选择的index播放音频 */
			playBgAudioMusicWithIndex(index) {
				if (index > this.musicList.length || index < 0) {
					return;
				}
				this.currentMusicIndex = index;
				let item = this.musicList[index];
				this.currentItem = item;
				this.bgAudioManager.src = item.music;
				this.bgAudioManager.title = item.title;
			},
			
		}
	}
</script>

<style lang="scss">
	
	.display_view {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		
		.rotate_animation_view {
			width: 460rpx;
			height: 460rpx;
			border-radius: 230rpx;
			// css animation
			animation-name: rotateexample;
			animation-duration: 10s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;

			.disc_view {
				position: absolute;
				width: 100%;
				height: 100%;
			}
			
			.url_view {
				position: absolute;
				left: 90rpx;
				top: 90rpx;
				width: 280rpx;
				height: 280rpx;
				border-radius: 140rpx;
			}
			
		}
	}
	
	@keyframes rotateexample {
		from {transform: rotate(0deg);}
		to {transform: rotate(360deg);}
	}
	
	.title_view {
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
		margin-top: 100rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.author_view {
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
		margin-top: 20rpx;
		text-align: center;
		color: #D1D1D1;
		font-size: 30rpx;
		font-weight: normal;
	}
	
	.action_view {
		// 距离底部布局
		position: absolute;
		bottom: 100rpx;
		width: 100%;
		
		// 内部控件布局
		display: flex;
		// background-color: #F0AD4E;
		justify-content: space-between;
		align-items: center;
	}
	
	.action_view_left {
		width: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.repeat_button {
			font-size: 60rpx;
			color: #FFFFFF;
		}
		
		.repeat_button_tips {
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
	
	.play_button {
		width: 100rpx;
		height: 100rpx;
	}
	
	.action_view_right {
		width: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.tim_button {
			font-size: 60rpx;
			color: #FFFFFF;
		}
	}
	
	// 播放模式弹出动画
	.random_pop_list_view {
		background-color: #FFFFFF;
		width: 100%;
		border-radius: 16rpx;
		
		.random_action_name {
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			text-align: center;
			width: 100%;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}
		
		.random_action_item {
			display: flex;
			padding-bottom: 50rpx;
			align-items: center;
			
			.cell_image {
				font-size: 48rpx;
				color: #000000;
				padding-left: 30rpx;
			}
			
			.cell_content {
				padding-left: 30rpx;
				
				.cell_title {
					font-size: 30rpx;
					font-weight: bold;
					padding-bottom: 5rpx;
				}
				
				.cell_tips {
					padding-top: 5rpx;
					font-size: 24rpx;
					font-weight: normal;
					color: #AAAAAA;
				}
				
			}
			
		}
		
	}
	
	
	// 定时底部弹框弹出动画
	.timing_pop_back_view {
		background-color: #FFFFFF;
		width: 100%;
		border-radius: 16rpx;
		
		.timing_pop_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			
			.timing_pop_name {
				font-size: 34rpx;
				font-weight: bold;
				color: #000000;
			}
			
			.current_time_view {
				font-size: 28rpx;
				font-weight: normal;
				color: #000000;
			}
		}
		
		.slider_name {
			padding: 30rpx 10rpx 0rpx 10rpx;
		}
		
		.timing_pop_bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 30rpx 50rpx 30rpx;
			
			.slider_start {
				font-size: 30rpx;
				color: #AAAAAA;
			}
			
			.slider_end {
				font-size: 30rpx;
				color: #AAAAAA;
			}
		}
	}

	
	
</style>
